<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>图库</title>
	<style type="text/css">
		body{
			background-color: #666;
		}
		 ul,li{
			margin: 0;
			padding: 0;
			list-style: none;
		} 
		ul{
			width: 216px;
			margin: 0 auto;
			background-color: #fff;
			border: 4px solid #fff;
			 overflow: hidden; 
			/*float: left;*/ 
			/*zoom:1;*/
			/*display: inline-block;*/
		}
		 li{
			width: 50px;
			height: 50px;
			margin: 2px;
			float: left;
		}
		 li.first{
			width: 158px;
			height: 158px;
		}
		 img{
			border-radius: 5px;
		}   
	</style>
</head>
<body>
	<ul>
		<li class="first"><img src="img/big_1.jpg"/></li>
		<li><a href="#"><img src="img/small_1.jpg"></a></li>
		<li><a href="#"><img src="img/small_2.jpg"></a></li>
		<li><a href="#"><img src="img/small_3.jpg"></a></li>
		<li><a href="#"><img src="img/small_4.jpg"></a></li>
		<li><a href="#"><img src="img/small_5.jpg"></a></li>
		<li><a href="#"><img src="img/small_6.jpg"></a></li>
		<li><a href="#"><img src="img/small_7.jpg"></a></li>
		<li><a href="#"><img src="img/small_8.jpg"></a></li>
		<li><a href="#"><img src="img/small_9.jpg"></a></li>
		<li><a href="#"><img src="img/small_10.jpg"></a></li>
		<li><a href="#"><img src="img/small_11.jpg"></a></li>
	<!--<div style="clear: both;"></div>-->
	</ul>
	

<script type="text/javascript">
window.onload = function () {
	var imgs = document.getElementsByTagName('img');
	
	// 方法一
	for (var i = 1; i < imgs.length; i++) {
		imgs[i].index = i;
		imgs[i].onmouseover = function (e) {
			imgs[0].src = 'img/big_' + this.index + '.jpg';
		}
	}
	
	// 方法二
	for (var i = 1; i < imgs.length; i++) {
		imgs[i].onmouseover = function () {
			imgs[0].src = this.src.replace('small','big');
		}
	}
	
}
</script>
</body>
</html>


   <!--清浮动
    1.给父级也加浮动
    2.给父级加display:inline-block
    3.在浮动元素下加<div class="clear"></div>
    .clear{ height:0px;font-size:0;clear:both;}
    4.在浮动元素下加<br clear="all"/>

    5. 给浮动元素的父级加{zoom:1;}
    :after{content:""; display:block;clear:both;}

    **在IE6，7下浮动元素的父级有宽度就不用清浮动

    haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高

  display: inline-block
  height: (任何值除了auto)
  float: (left 或 right)
  width: (任何值除了auto)
  zoom: (除 normal 外任意值) -->